<template>
  <el-drawer v-model="dialogVisible" title="详情" :direction="direction">
    <!-- <div> {{ currentClickUserBuild?.details?.buildData }}</div>
    <div> {{ currentClickUserBuild?.details?.totalScoreItem }}</div>
    <div> {{ currentClickUserBuild?.allUser }}</div> -->
    <el-collapse model-value="空间数据">
      <el-collapse-item title="空间数据" name="空间数据">
        <div> {{ currentClickUserBuild?.details?.buildData }}</div>
      </el-collapse-item>
      <el-collapse-item title="相关打分" name="相关打分">
        <div> {{ currentClickUserBuild?.details?.totalScoreItem }}</div>
      </el-collapse-item>
      <el-collapse-item title="所有的住户" name="所有的住户">
        <div> {{ currentClickUserBuild?.allUser }}</div>
      </el-collapse-item>
    </el-collapse>
    <!-- <span>Hi, there!</span> -->
  </el-drawer>
</template>

<script lang="ts" setup>
  import { ref, nextTick } from 'vue';
  import type { DrawerProps } from 'element-plus';

  const direction = ref<DrawerProps['direction']>('rtl');

  const currentClickUserBuild = ref<any>({});
  const dialogVisible = ref(false);
  const open = async data => {
    currentClickUserBuild.value = data;
    await nextTick();
    dialogVisible.value = true;
  };

  defineExpose({
    open
  });
</script>
